<template>
    <div>
       <van-row class="cz-title">
            <van-col span="3">
                <img class="fl icon_return" src="../../assets/image/center/icon_return.png" alt="" @click="$router.push({name:'index'})">
            </van-col>
            <van-col span="18" class="text-align-c font-36">
                <input type="text" class="search-input font-22" placeholder="请输入昵称/UID/靓号 " v-model="nickName" @input="searchLists">
            </van-col>
            <van-col span="3" class="text-align-r quxiao font-3">
                <span  @click="quxiao()">取消</span>
            </van-col>
        </van-row>
        <ul class="clearfix focus-ul">
            <li class="clearfix" v-for="(item,index) in list" :key="index" @click="centerLink(item.id)" v-if="nullData==false">
                <img class="fl focusTx border-radius-50" :src="$imgPath(item.headImg)" alt=""/>                
                <div class="clearfix focus-ul-div fl">
                    <span class="name-age">
                        <em class="fl color-3 font-3 margin-r">{{item.nickname}}</em>
                        <img class="fl nan-nv" v-if="item.sex == 2" src="../../assets/image/index/img_female.png" alt="">
                        <img class="fl nan-nv" v-else src="../../assets/image/index/img_male.png" alt="">
                        <em class="fl color-9 font-3">{{item.age}}</em>
                        <em v-if="item.onlineStatus == 0" class="fr zai font-47">在线</em>
                        <em v-else class="fr font-47 color-9">30分钟前</em>
                    </span>
                    <span class="name-game-icon">
                        <img :src="$imgPath(itemS.service.image)" alt="" v-for="(itemS,indexS) in item.servicesAuthPOList" :key="indexS">
                    </span>
                    <span class="font-2 color-9" style="margin-top:.1rem;">
                        {{item.signature}}
                    </span>
                </div>
            </li>
            <li v-if="nullData" class="arrayNull">对不起，没有找到您想要的结果</li>
        </ul>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    data(){
        return{
            nickName:'',
            list:[],
            socrt:this.$route.query.socrt,
            type:this.$route.query.type,
            nullData:false
        }
    },
    created(){
    },
    methods:{
        quxiao(){
            if(this.nickName){
                this.nickName=''
                this.list = [];
            }else{
                this.$router.push({
                    name:"index"
                });
            }
        },
        searchLists(){
            if(this.socrt == 'index' && this.nickName != ''){
                apiHttp.apiIndex.getUserServiceAuth(this.nickName,'',resp=>{
                    for(var i=0;i<resp.data.userServiceAuthList.length;i++){
                        if(resp.data.userServiceAuthList[i].headImg==null || resp.data.userServiceAuthList[i].headImg==''){
                            resp.data.userServiceAuthList[i].headImg = '/user/head/defaultHeadImage.png';
                        }
                    }
                    this.list = resp.data.userServiceAuthList
                })
            }else if(this.socrt == 'focus' && this.nickName != ''){
                let params = {
                    name:this.nickName
                }
                if(this.type == 1){
                    apiHttp.apiCenter.searchFollow(params,resp=>{
                        for(var i=0;i<resp.data.userServiceAuthList.length;i++){
                            if(resp.data.userServiceAuthList[i].headImg==null || resp.data.userServiceAuthList[i].headImg==''){
                                resp.data.userServiceAuthList[i].headImg = '/user/head/defaultHeadImage.png';
                            }
                        }
                        this.list = resp.data.userServiceAuthList
                    })
                }else{
                    apiHttp.apiCenter.searchFollowObject(params,resp=>{
                        for(var i=0;i<resp.data.userServiceAuthList.length;i++){
                            if(resp.data.userServiceAuthList[i].headImg==null || resp.data.userServiceAuthList[i].headImg==''){
                                resp.data.userServiceAuthList[i].headImg = '/user/head/defaultHeadImage.png';
                            }
                        }
                        this.list = resp.data.userServiceAuthList
                    })
                } 
                if(this.list.length==0){
                    this.nullData = true;
                }else{
                    this.nullData = false;
                }    
            }  
            if(this.nickName == ''){
                this.list = []
                this.nullData = true;
            }else{
                this.nullData = false;
            }            
        },
        centerLink(id){
            this.$router.push({
                name:'center',
                query:{
                    userId:id
                }
            })
        }
    }
}
</script>

<style scoped>
.font-47{
    font-size: 0.47rem;
}
.margin-r{
    margin-right: 0.3rem;
}
.cz-title{
    height: 1.36rem;
    line-height: 1.36rem;
    padding: .2rem .6rem .6rem .6rem;
    width: calc(100% - 1.2rem);
    overflow: hidden;
}
.icon_return{
    width: .8rem;
    margin-top: .28rem;
}
.search-input{
    height: 1.36rem;
    width: calc(100% - .4rem);
    line-height: .68rem;
    background-color: rgba(238,238,238,1);
    border-radius: .8rem;
    padding-left: .4rem;
    margin: 0;
}
.quxiao{
    line-height: 1.56rem;
}
.focus-ul{
    padding: 0 .6rem;
}
.focus-ul li{
    padding: .4rem 0;
}
.focus-ul-div{
    width: calc(100% - 2.8rem);
    padding-left: .4rem;
}
.focusTx{
    width: 2.4rem;
    height: 2.4rem;    
}
.focus-ul-div span{
    display: block;
    height: .8rem;
    line-height: .8rem;
}
.name-age{
    height: .8rem;
    line-height: .8rem;
}
.nan-nv{
    margin: .1rem;
    width: .5rem;
    margin-right: .1rem;
}
.name-game-icon{
    height: .8rem;
     margin-top: 0.2rem;
}
.name-game-icon>img{
    width: .7rem;
    margin-right: 0.2rem;
}   
.zai{
    color: #D84E4D;
}
.van-ellipsis{
    font-size: .6rem;
}
</style>

